﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pong</title>
    <link type="text/css" rel="Stylesheet" href="pong.css" />
    <script type="text/javascript" src="../mm/gameengine.js"></script>
    <!--<script type="text/javascript" src="../Lib/lib.js"></script>
    <script type="text/javascript" src="../engine.js"></script>
    <script type="text/javascript" src="../Timer.js"></script>
    <script type="text/javascript" src="../Sys.js"></script>
    <script type="text/javascript" src="../Image.js"></script>
    <script type="text/javascript" src="../Font.js"></script>
    <script type="text/javascript" src="../Input.js"></script>
    <script type="text/javascript" src="../Map.js"></script>
    <script type="text/javascript" src="../Camera.js"></script>
    <script type="text/javascript" src="../Animation.js"></script>
    <script type="text/javascript" src="../Sound.js"></script>
    <script type="text/javascript" src="../CollisionMap.js"></script>
    <script type="text/javascript" src="../BackgroundMap.js"></script>
    <script type="text/javascript" src="../Loader.js"></script>
    <script type="text/javascript" src="../Entity.js"></script>
    <script type="text/javascript" src="../Game.js"></script>-->
    <script type="text/javascript" src="../socket.io.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Lib/jquery-impromptu.3.1.min.js"></script>
    <script type="text/javascript">
      var usercount = 0;
      var userindex;
      var socket;
      var allusers = {};
      var username;
      $(function () {
        socket = io.connect('http://localhost:8081');
        socket.on('connect', function () {
          $('#mainArea').append($('<p>').append('connected'));
          $.prompt('connected', { prefix: 'impromptu', callback: mycallbackfunc });
        });

        socket.on('announcement', function (msg) {
          $('#mainArea').append($('<p>').append($('<em>').text(msg)));
          if (msg.indexOf('disconnected') != -1) {
            alert('One user has left, re-start game now');
            window.location.href = window.location.href;
          }
        });

        socket.on('userinfo', function (msg) {
          userindex = msg;
          usercount = 0;

          $('#userinfo').text('Name: ' + username + ' Index: ' + userindex);
          for (var i in allusers) {
            usercount++;
          }

          if (usercount == 1 && userindex == 1) {
            $.prompt('please wait for another player', { prefix: 'impromptu' });
            bindUserInput();
          }
          if (usercount == 2) {
            $.prompt('please wait player1 to start', { prefix: 'impromptu' });
            bindUserInput();
          }
          else if (usercount > 2 && userindex > 2) {
            $.prompt('game already starts, please view', { prefix: 'impromptu' });
          }
        });

        socket.on('user message', message);
        socket.on('userinput', function (from, msg) {
          $('#mainArea').append($('<p>').append($('<b>').text(from), " pressed: " + msg));
          if (msg.type == 'keydown') {
            if (msg.code == 37) { // left
              Eg.game.player2.accel.x = Eg.game.player1.accelDef.air;
            }
            if (msg.code == 39) { // right
              Eg.game.player2.accel.x = -Eg.game.player1.accelDef.air;
            }

            if (msg.code == 50 && userindex == 2) { // start
              Eg.game.ball.vel.x = -Eg.game.ball.vel.x;
              Eg.game.ball.vel.y = -Eg.game.ball.vel.y;
              Eg.sys.startRunLoop();
            }
          }
          else if (msg.type == 'keyup') {
            Eg.game.player2.accel.x = 0;
          }
        });

        socket.on('nicknames', function (nicknames) {
          allusers = nicknames;
          $('#nicknames').empty().append($('<span>Online: </span>'));
          for (var i in nicknames) {
            $('#nicknames').append($('<div>').text(nicknames[i]));
          }

          if (userindex && userindex == 1) {
            $.prompt('please press "2" to start pong', { prefix: 'impromptu' });
          }
        });

        socket.on('reconnect', function () {
          $('#mainArea').remove();
          message('System', 'Reconnected to the server');
        });

        socket.on('reconnecting', function () {
          message('System', 'Attempting to re-connect to the server');
        });

        socket.on('error', function (e) {
          message('System', e ? e : 'A unknown error occurred');
        });
      });
      function mycallbackfunc(e, v, m, f) {
        var txt = 'Please enter your name:<br /><input type="text" id="alertName" name="alertName" value="name here" />';

        function mysubmitfunc(e, v, m, f) {
          if (m.alertName == "") {
            alert('name cannot be empty');
            return false;
          }
          username = m.alertName;
          socket.emit('nickname', m.alertName, function (set) {
            if (!set) {
              active = true;
              clear();
              return;
              //return $('#chat').addClass('nickname-set');
            }
            alert('nick name already defined');
            //$('#nickname-err').css('visibility', 'visible');
          });
          return true;
        }

        $.prompt(txt, {
          submit: mysubmitfunc,
          buttons: { Ok: true }
        });
      }

      function message(from, msg) {
        $('#mainArea').append($('<p>').append($('<b>').text(from), "  " + msg));
      }
</script>

</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 1120px; height: 500px; border: solid 1px #ccc">
<tr>
<td style="width: 600px">
<div id="mainArea" style="overflow:scroll; height: 300px">

</div>
<div style="height: 200px;">

<textarea id="message" style="width: 100%; height: 150px"></textarea>
<br />
<input type="button" id="sendBtn" value="Send" />
</div>
</td>
<td style="width: 320px">
<div style="width: 320px; height: 480px; margin: 0px auto">
<canvas id="canvas" width="320" height="480" style="background-color: #000; border: solid 1px black;"></canvas>
</div>
</td>
<td valign="top" style="width: 200px; background-color: Lime">
<div id="userinfo"></div>
<div id="nicknames"></div>
</td>
</tr>
</table>
<script type="text/javascript">
  $('#sendBtn').click(function () {
    message('me: ', $('#message').val());
    socket.emit('user message', $('#message').val());
    clear();
    $('#mainArea').get(0).scrollTop = 10000000;
    return false;
  });

  function clear() {
    $('#message').val('').focus();
  };
</script>
<script type="text/javascript" src="level.js"></script>
<script type="text/javascript" src="pong.js"></script>
<script type="text/javascript">
  function setupgame() {
    Eg.init({
      canvasId: 'canvas',
      FPS: 60,
      width: 160,
      height: 240,
      scale: 2,
      resources: [],
      GameClass: PongGame,
      AutoStart: false,
      font: '../Resource/font.png'
    });
  }

  function bindUserInput() {
    Eg.input.bind(Eg.KEY.LEFT_ARROW, 'left');
    Eg.input.bind(Eg.KEY.RIGHT_ARROW, 'right');

    Eg.input.useraction = function (event) {
      socket.emit('userinput', { type: event.type, code: event.which });
      if (event.which == 49) {
        Eg.sys.stopRunLoop();
      }
      if (event.which == 50 && userindex == 1) {
        Eg.sys.startRunLoop();
      }
    }
  }
  setupgame();
  
</script>
<!--<script type="text/javascript" src="../debug/menu.js"></script>
  <script type="text/javascript" src="../debug/entities-panel.js"></script>
  <script type="text/javascript" src="../debug/graph-panel.js"></script>-->
</body>
</html>
